import {
    Layout,
    Menu,
    Button,
    Avatar,
    Space,
    Dropdown,
    Badge,
    Breadcrumb,
    Row,
    Col,
    message
} from 'antd'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined,
    SearchOutlined,
    BellOutlined,
    DownOutlined,
    QuestionCircleOutlined
} from '@ant-design/icons'
import React, {useEffect, useState} from 'react'
import {useNavigate, useLocation} from 'react-router-dom'
import {getStorage, getToken, setToken} from '../utils/tools'
import {adminMenuItems, sellerMenuItems, menuItems} from '../grants'
import head from '../assets/img/logo.png'

const {Header, Sider, Content} = Layout

export default function MyLayout({children}) {
    const [collapsed, setCollapsed] = useState(false)
    const [themeColor, setThemeColor] = useState('#3961F3')
    const [siteTitle, setSiteTitle] = useState('LBS智慧营销平台')
    const [breadcrumb, setBreadcrumb] = useState([])
    const navigate = useNavigate()
    // 获取路径
    const {pathname} = useLocation()
    // 导航
    // 判断角色是哪一种
    const role = getStorage('accountType')
    const menuItems = role === '0' ? adminMenuItems : sellerMenuItems

    // 获取面包屑导航
    const findDeepPath = (key) => {
        const result = []
        const findInfo = (arr) => {
            arr.forEach((item) => {
                const {children, ...info} = item
                result.push(info)
                if (children) {
                    findInfo(children)
                }
            })
        }
        findInfo(menuItems)
        // 根据当前的key值过滤数据
        let tmpData = result.filter((item) => key.includes(item.key))

        tmpData = tmpData.map((item) => {
            return {title: item.label, href: item.key}
        })
        if (tmpData.length > 0) {
            return tmpData
        }
        return []
    }
    useEffect(() => {
        // 判断是否有token
        if (!getToken()) {
            message.error('请先登录')
            navigate('/')
        }
        if (typeof window !== 'undefined') {
            setBreadcrumb(findDeepPath(pathname))
        }
    }, [])
    return (
        <Layout style={{height: '100vh'}}>
            <Sider
                trigger={null}
                collapsible
                collapsed={collapsed}
                style={{backgroundColor: themeColor}}
                className="mysider"
            >
                <div className="logo">
                    <img src={head} alt="logo" style={{width: 30, height: 30}}/>
                    <span style={{marginLeft: 10, display: collapsed ? 'none' : ''}}>
            LBS智慧营销平台
          </span>
                </div>
                <Menu
                    mode="inline"
                    style={{backgroundColor: themeColor, color: '#FFF'}}
                    defaultSelectedKeys={['/admin']}
                    onClick={({key}) => {
                        // console.log(key)
                        setBreadcrumb(findDeepPath(key))
                        navigate(key)
                    }}
                    items={menuItems}
                />
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        backgroundColor: '#FFF',
                        display: 'flex',
                        justifyContent: 'space-between',
                        paddingRight: 24,
                        alignItems: 'center'
                    }}
                >
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
                        onClick={() => {
                            setCollapsed(!collapsed)
                        }}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64
                        }}
                    />
                    <div
                        style={{
                            display: 'flex',
                            alignItems: 'center'
                        }}
                    >
                        <Space size={'middle'} style={{fontSize: 16, marginRight: 16}}>
                            <SearchOutlined/>
                            <Badge dot>
                                <BellOutlined/>
                            </Badge>
                            <QuestionCircleOutlined/>
                        </Space>
                        <Dropdown
                            menu={{
                                items: [
                                    {
                                        label: (
                                            <span
                                                onClick={() => {
                                                    setToken('')
                                                    navigate('/')
                                                    message.success('退出成功')
                                                }}
                                            >
                        退出
                      </span>
                                        ),
                                        key: '0'
                                    }
                                ]
                            }}
                        >
                            <a onClick={(e) => e.preventDefault()}>
                                <Avatar
                                    style={{backgroundColor: '#87d068', marginRight: 10}}
                                    icon={<UserOutlined/>}
                                />
                                <Space>
                                    {/* 获取管理员名称 */}
                                    {getStorage('nickname')}
                                    <DownOutlined style={{fontSize: 10, color: '#999'}}/>
                                </Space>
                            </a>
                        </Dropdown>
                    </div>
                </Header>
                <Content
                    style={{
                        overflow: 'auto'
                    }}
                >
                    <Row className="breadcrumb">
                        <Col span={24}>
                            <Breadcrumb items={breadcrumb}/>
                        </Col>
                    </Row>
                    {children}
                </Content>
            </Layout>
        </Layout>
    )
}
